/*
  学习目标：给组件的props指定类型
  步骤：
     1. 导包 prop-types
     2. 指定规则对象
    
*/

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class App extends Component {
  render() {
    return (
      <div>
        <Child list={[]} title={<i>hello React</i>} obj={{ color: 20 }}></Child>
      </div>
    );
  }
}

// 💥propTypes是固定属性, 一个字都不能错
Child.propTypes = {
  // 3. PropTypes指定具体属性的规则
  list: PropTypes.array.isRequired,
  zs: PropTypes.object,
  // JSX
  title: PropTypes.element,
  // 约束对象的属性值类型
  obj: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number,
  }),
};

function Child({ list }) {
  return <h1>Child - </h1>;
}
